<template>
  <div class="pagetext">
    <div v-show="type">
      <div class="topb1">
        <span
          class="iconfont icon-arrowRight-copy-copy"
          @click="$router.go(-1)"
        ></span>
        <div class="topbtext">
          <!-- <span class="addbook">加入书架</span> -->
          <!-- <span @click="$router.push('/bookpages')">立即阅读</span> -->
          <span>
            <van-cell class="iconfont icon-sandian" @click="showShare = true" />
            <van-share-sheet
              v-model="showShare"
              title="立即分享给好友"
              :options="options"
              @select="onSelect"
              :style="{ height: '50%', width: '100%' }"
            />
          </span>
        </div>
      </div>

      <div class="buttompage">
        <div class="buttbox">
          <span @click="up(zjid)">上一章</span>
          <span @click="down(zjid)">下一章</span>
        </div>
        <ul>
          <li>
            <van-cell @click="showPopup">
              <span class="iconfont icon-mulu-lujing"></span>
              <p>目录</p>
            </van-cell>
            <van-popup
              v-model="show"
              position="left"
              :style="{ height: '100%', width: '80%' }"
            >
              <div class="mlbox">
                <img :src="mllist.coverImage" v-lazy="mllist.coverImage" />
                <div class="mltext">
                  <p class="bookname">{{ mllist.title }}</p>
                  <p class="acter">{{ mllist.author }}</p>
                </div>
              </div>
              <div class="sxmbox">
                <div class="muchlist">共{{ mllength.length }}章</div>
                <div class="shunx">
                  <span v-if="edit" @click="zhen">正序</span>
                  <span v-if="!edit" @click="fan">倒序</span>
                </div>
              </div>

              <div class="zjbox">
                <ul>
                  <li
                    v-for="(item, index) in mllength"
                    :key="index"
                    @click="itemtitle(item.uuid)"
                  >
                    <span> {{ item.title }}</span>
                    <em class="vip">{{ item.needPay ? "vip" : null }}</em>
                    <!-- <span class="zjtitle"></span> -->
                  </li>
                </ul>
              </div>
            </van-popup>
          </li>
          <li @click="addtype" v-show="!moduletype">
            <span class="iconfont icon-yejianmoshishenyemoshiyueliang"></span>
            <p>夜间</p>
          </li>
          <li @click="addtype" v-show="moduletype">
            <span class="iconfont icon-baitian"></span>
            <p>白天</p>
          </li>
          <li>
            <span class="iconfont icon-shezhi"></span>
            <p>设置</p>
          </li>
        </ul>
      </div>
    </div>

    <div
      v-html="chapter"
      @click="divtype"
      :class="['page', { pagecolor1: moduletype }, { pagecolor2: !moduletype }]"
    >
      {{ chapter }}
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { readerInfo, bookContent } from "../../api/res";
export default {
  data() {
    return {
      show: false,
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
      mllist: "",
      mllength: "",
      chapter: "",
      zjid: "", //章节id1
      bookxqid: "", //书籍
      type: false,
      moduletype: false, //颜色
      // moduletype2:true,//按钮
      index: 0, //章节下标
      edit: false,
      zjid2: "", //章节id2
      page: 0,
    };
  },

  methods: {
    showPopup() {
      this.show = true;
    },

    addtype() {
      this.moduletype = !this.moduletype;
      // this.moduletype2 = !this.moduletype2;
    },

    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },

    readerInfoFun() {
      readerInfo({ source_uuid: this.$route.query.id }).then((data) => {
        console.log(data.data.catalog);
        // console.log(data.data.book);
        // console.log(this.$route.query.id);
        this.mllist = data.data.book; //书籍信息
        this.mllength = data.data.catalog; //全部章节
        for (let i = 0; i < this.mllength.length; i++) {
          this.mllength[i].index = this.index += 1;
        }
        // console.log(this.mllength[i].index);
      });
    },

    //排序
    zhen() {
      this.edit = false;
      this.mllength.sort(function (x, y) {
        return x.index - y.index;
      });
    },
    fan() {
      this.edit = true;
      this.mllength.sort(function (x, y) {
        return y.index - x.index;
      });
    },
    bookContentFun() {
      bookContent({ source_uuid: this.bookxqid, content_uuid: this.zjid }).then(
        (data) => {
          console.log(data);
          this.chapter = data.data.content;
        }
      );
    },
    //章节点击
    itemtitle(id) {
      let index = this.mllength.findIndex((item) => item.uuid == id);
      if (this.mllength[index].needPay) {
        Toast("请先充值");
      } else {
        bookContent({
          source_uuid: this.bookxqid,
          content_uuid: id,
        }).then((data) => {
          console.log(data);
          this.chapter = data.data.content;
          this.show = false;
        });
      }
    },

    divtype() {
      this.type = !this.type;
    },

    //上一章
    up(id) {
      let index = this.mllength.findIndex((item) => item.uuid == id);
      console.log(index);
      if (index == 0) {
        Toast("当前已经是第一章节");
        return;
      } else {
        this.page = index - 1;
        this.zjid = this.mllength[this.page].uuid;
        bookContent({
          source_uuid: this.bookxqid,
          content_uuid: this.mllength[this.page].uuid,
        }).then((data) => {
          this.chapter = data.data.content;
          this.$el.scrollTop = 0;
          // if (this.chapter) {
          //   this.flag1 = false;
          // }
        });
      }
    },
    //下一章
    down(id) {
      let index = this.mllength.findIndex((item) => item.uuid == id);
      console.log(index);
      if (index == this.mllength.length) {
        Toast("当前已经是第一章节");
        return;
      } else {
        this.page = index + 1;
        this.zjid = this.mllength[this.page].uuid;
        bookContent({
          source_uuid: this.bookxqid,
          content_uuid: this.mllength[this.page].uuid,
        }).then((data) => {
          this.chapter = data.data.content;
          this.$el.scrollTop = 0;
          // if (this.chapter) {
          //   this.flag1 = false;
          // }
        });
      }
    },
  },

  created() {
    //书籍id
    this.bookxqid = this.$route.query.id;
    //章节id
    this.zjid = this.$route.query.firsrid;
    console.log(this.zjid);
    this.readerInfoFun();
    this.bookContentFun();
  },
};
</script>

<style lang="less">
.pagetext {
  //夜间
  .pagecolor1 {
    color: gray;
    background-color: black;
  }
  //白天
  .pagecolor2 {
    color: black;
    background-color: white;
  }
  .topb1 {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #e1e1e2;
    position: fixed;
    display: flex;
    justify-content: space-between;
    background-color: white;
    .icon-arrowRight-copy-copy {
      font-size: 20px;
      font-weight: bold;
      line-height: 50px;
      margin-left: 10px;
    }
    .topbtext {
      // width: 250px;
      //   border: 1px solid black;
      display: flex;
      justify-content: space-between;
      line-height: 50px;
      .icon-sandian {
        margin-right: 20px;
        font-size: 20px;
        line-height: 30px;
      }
      // .addbook {
        // margin-left: 35px;
        // margin: auto;
      // }
    }
  }
  .buttompage {
    width: 100%;
    height: 90px;
    border-top: 1px solid gainsboro;
    background: white;
    bottom: 0px;
    left: 0px;
    position: fixed;
    .buttbox {
      display: flex;
      justify-content: space-between;
      // padding-bottom: 10px;

      margin-top: 10px;
      span {
        width: 185px;
        // border: 1px solid black;
        // border-right: 1px solid gainsboro;
        text-align: center;
        padding-bottom: 8px;
        font-size: 13px;
        // padding: 6px 25px;
      }
    }
    ul {
      display: flex;
      justify-content: space-around;
      li {
        color: black;
        text-align: center;
        .van-cell {
          padding: 0px;
          line-height: 17px;
          p {
            margin-left: 3px;
          }
        }
        span {
          font-size: 30px;
          line-height: 35px;
        }
        p {
          font-size: 10px;
          color: #80809c;
        }
      }
    }
  }
  .mlbox {
    display: flex;
    img {
      width: 60px;
      height: 80px;
      margin-left: 10px;
      margin-top: 20px;
    }
    .mltext {
      // border: 1px solid black;
      margin-left: 20px;
      margin-top: 40px;
      .bookname {
        color: black;
        font-size: 13px;
      }
      .acter {
        line-height: 20px;
        // margin-left: -0px;
      }
    }
  }
  .sxmbox {
    display: flex;
    justify-content: space-between;
    padding: 0px 20px;
    line-height: 35px;
    .muchlist {
      font-size: 14px;
      color: black;
      font-weight: bold;
      // padding-right: 185px;
      // margin-top: 10px;
    }
    .shunx {
      span {
        font-size: 14px;
        font-weight: bold;
      }
    }
  }

  .zjbox {
    ul {
      display: flex;
      flex-wrap: wrap;
      li {
        width: 100%;
        border-bottom: 0.5px dashed #d0d0d0;
        padding-left: 20px;
        display: flex;
        position: relative;
        span {
          // width: 200px;
          font-size: 13px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          // padding-left: 10px;
        }
        .vip {
          position: absolute;
          // margin-left: 20px;
          right: 10%;
        }
        // .zjtitle {
        // display: inline-block;
        // margin-right: 10px;
        // padding-right: 25px;
        // }
        // span:last-child{
        // }
      }
    }
  }
  .page {
    margin: auto;
    line-height: 35px;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    h1 {
      margin-bottom: 20px;
      font-size: 24px;
    }
    p {
      text-indent: 2em;
      margin: 10px 0;
      font-size: 16px;
      line-height: 30px;
    }
  }
}
</style>